<!--
该界面是管理员处理预约界面的系统
1.可以查询预约记录
2.有一个表格，最先显示的是待预约的信息
3.表格包括，预约的id,预约的教室，预约的时间，预约人属性（老师或学生），预约人的姓名，审核状态,操作（同意、驳回）
4.在表格的上方显示以下数据（待审核的条数、总预约记录的条数）
5.后端人员需要注意的是，如果您发现表格没有包括所有条目，请检查该文件末尾 js函数中 table.init函数中，limit是否修改，默认最大条数是10条。-->
<!DOCTYPE html>
<html>

<head>
    {% load static %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>管理员预约管理</title>
    <link rel="stylesheet" href="{% static 'layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static 'css/admin_reserve.css' %}">
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">智慧教室管理系统</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                         class="layui-nav-img">
                    <span id="username">{{ name }}</span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="/user_center/">个人中心</a></dd>
                    <dd><a href="/logout/">退出登录</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="/admin_userManagement/">用户管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="student/">学生</a></dd>
                        <dd><a href="teacher/">教师</a></dd>
                        {% if state == 4 %}
                            <dd><a href="college_admin/">院级管理员</a></dd>
                        {% endif %}
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="/classroom-basic-info/">教室基本信息管理</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/admin_useInfo_new/">教室使用信息管理</a>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="/course-schedule/">教室排课管理</a>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="/adminreserve/">教室预约管理
                        <span class="layui-badge-dot"></span></a>
                </li>
            </ul>
        </div>
    </div>

        <div class="layui-body">

            <div class="basicInfoHeader">
                <p>教室预约信息管理</p>
            </div>

            <!-- 下面是对于预约信息的管理 -->
            <div class="reserveBox">
                <blockquote class="searchBox">
                    <!-- 用一个表单提交需要查询的预约记录的名称 -->
                    <form class="layui-form">
                        <label class="layui-form-label">
                            请输入预约人姓名
                        </label>
                        <input name="reserve_name" autocomplete="off" class="layui-input" type="text" value="">
                        <div class="layui-input-block submit">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">查询记录</button>
                        </div>
                    </form>
                </blockquote>
                <fieldset class="layui-elem-field">
                    <div class="reserveTableBox">
                        <div class="reserveData">
                            <p>待审核{{state1}}条预约记录，共有{{state2}}条预约记录</p>

                        </div>
                        <table lay-filter="reserveTable">
                            <thead>
                                <tr>
                                    <th lay-data="{field:'id',fixed: 'center'}">预约ID</th>
                                    <th lay-data="{field:'classroom'}">预约教室</th>
                                    <th lay-data="{field:'time'}">预约时间</th>
                                    <th lay-data="{field:'identity'}">预约人属性</th>
                                    <th lay-data="{field:'name'}">预约人姓名</th>
                                    <th lay-data="{field:'remark'}">预约理由</th>
                                    <th lay-data="{field:'state'}">审核状态</th>
                                    <th lay-data="{field:'operation'}">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for l in list1 %}
                                <tr>
                                    <td>{{l.reserve_id}}</td>
                                    <td>{{l.classroom_id}}</td>
                                    <td>{{l.time}}</td>
                                    <td>{{l.shenfen}}</td>
                                    <td>{{l.name}}</td>
                                    <td>{{l.remark}}</td>
                                    <td>{{l.state}}</td>
                                    <td>
                                        <a class="layui-btn layui-btn-sm reserve" lay-event="yes">同意</a>
                                        <a class="layui-btn layui-btn-danger layui-btn-sm reserve" lay-event="no">驳回</a>
                                    </td>
                                </tr>
                                {%endfor%}
                                <!-- <tr>
                                    <td>3</td>
                                    <td>305</td>
                                    <td>第一周周一第一节课</td>
                                    <td>学生</td>
                                    <td>王二</td>
                                    <td>已驳回</td>
                                    <td>
                                        <button class="delete">同意</button>
                                        <button class="revise">驳回</button>
                                    </td>
                                </tr> -->
                            </tbody>
                        </table>
                    </div>
                </fieldset>
            </div>
        </div>
    <div id="reserveReason_main" style="display: none; ">
        <div class="layui-form " id="reserve-form ">
            <div class="layui-form-item center ">
                <label class="layui-form-label " style="width: 100px ">驳回理由</label>
                <div class="layui-input-block ">
                    <input type="text " id="reserve_reason_text" required value=" " style="width: 240px " lay-verify="required "
                           placeholder="请输入驳回理由" autocomplete="off " class="layui-input ">
                </div>
            </div>
            <div class="layui-form-item ">
                <div class="layui-input-block ">
                    <button class="layui-btn " lay-submit lay-filter="save" id="reserve_reason">立即提交</button>
                </div>
            </div>
        </div>
    </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="{%static 'layui/layui.js'%}"></script>
    <script>
        //JS
        layui.use(['element', 'layer', 'util'], function () {
            var element = layui.element,
                layer = layui.layer,
                util = layui.util,
                $ = layui.$;

            //头部事件
            util.event('lay-header-event', {
                //左侧菜单事件
                menuLeft: function (othis) {
                    layer.msg('展开左侧菜单的操作', {
                        icon: 0
                    });
                },
                menuRight: function () {
                    layer.open({
                        type: 1,
                        content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                        area: ['260px', '100%'],
                        offset: 'rt' //右上角
                        ,
                        anim: 5,
                        shadeClose: true
                    });
                }
            });

        });
        var table = layui.table;
        $.ajax({
                url: "/user/",
                method: "get",
                success: function (response) {
                    if(response.msg === 'ok'){
                        $("#username").html(response.data.username)
                    } else {
                        window.location.href = '/login'
                    }
                },
                error: function (err) {
                    window.location.href = '/login'
                }
        })
        //转换静态表格
        table.init('reserveTable', {
            height: 315 //设置高度
            ,
            limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
            //支持所有基础参数
            ,
            page: true
        });
        var rid = undefined;
        var robj = undefined;
        var index = undefined;
        table.on("tool(reserveTable)", function (obj) {
            var data = obj.data
            if (obj.event == "yes") {
                state = 1
                states = "已审批"
                $.ajax({
                    url: "/adminreserve/",
                    method: "post",
                    data: {
                        id: data["id"],
                        state: state,
                        remark: ''
                    },
                    success: function (response) {
                        obj.update({
                            state: states
                        })
                    },
                    error: function (err) {

                    }
                })
            } else {
                state = 2
                states = "已驳回"
                rid = data['id']
                robj = obj
                index = layer.open({
                    type: 1,
                    title: "填写预约驳回理由",
                    area: ['400px', '300px'],
                    shadeClose: true, //点击遮罩关闭
                    content: $("#reserveReason_main"),
                    success: function (layero, index) {
                    },
                    yes: function () {
                    }
                });
            }

        })

        //点击按钮，提交预约理由
        $("#reserve_reason").on("click", function () {
            var reason = $("#reserve_reason_text").val()
            if(!reason.trim()){
                alert("请填写驳回理由");
                return
            }
            $.ajax({
                url: "/adminreserve/",
                method: "post",
                data: {
                    id: rid,
                    remark: reason,
                    state: 2
                },
                success: function (response) {
                    robj.update({
                        state: "已驳回"
                    })
                    layer.close(layer.index);
                },
                error: function (err) {
                    layer.close(layer.index);
                }
            })

        })
    </script>
</body>

</html>